<template>
  <el-card>
    
    <v-charts   :options="options" />
  </el-card>
</template>

<script>
import VueEcharts from "vue-echarts"; 
import 'echarts/lib/chart/bar'
// import 'echarts/lib/component/tooltip'
import "echarts"
// 引入接口数据
import getData from '../../request/charts'
export default {
  components: { "v-charts": VueEcharts },
  data() {
    return {
      options : {
        title:{
          text:'月销售营业额统计'
        },
      xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          }
      }]
    } 
      };
  },
  // 把数据接口中的数据放在生命周期中调用
  created(){
    getData().then(list=>{
      // console.log(list)
      // 横坐标数值组
      const xData=[];
      // 纵坐标数值组
      const yData=[]
      list.forEach(item => {
        xData.push(item.month+'月')
        yData.push(item.total)
      });
      // 更新数据 错误的做法
      // this.options.xAxis.data=xData
      // this.options.series.data=yData
      // 这里必须对options重新赋值
      // assign合并两个对象，返回一个新的对象
      this.options=Object.assign(this.options,{
        xAxis:{
          data:xData
        },
        series:{
          data:yData
        }
      })
    })
  }
};
</script>

<style lang="less" scoped>
.echarts {
  width: 100% !important;
}
</style>